Bootstrap Example

BootStrap - Listas Agrupadas

BootStrap - List group Básico

Primeiro item
Segundo item
Terceiro item

Código do controle acima:
   <ul class="list-group">
       <li class="list-group-item">Primeiro item</li>
       <li class="list-group-item">Segundo item</li>
       <li class="list-group-item">Terceiro item</li>
   </ul>

BootStrap - List group com item selecionado

Item 1 - Ativo
Segundo item - Inativo
Terceiro item - Inativo

Código do controle acima:
   <ul class="list-group">
       <li class="list-group-item active">Item 1 - Ativo</li>
       <li class="list-group-item">Segundo item - Inativo</li>
       <li class="list-group-item">Terceiro item - Inativo</li>
   </ul>

BootStrap - List group com item desabilitado

A classe desativada adiciona uma cor de texto mais clara ao item desativado. E, se usado em links, removerá o efeito de foco padrão.

Primeiro item - Desabilitado Segundo item - Desabilitado Terceito item - Habilitado

Código do controle acima:
   <div class="list-group">
       <a href="#" class="list-group-item disabled">Primeiro item - Desabilitado</a>
       <a href="#" class="list-group-item disabled">Segundo item - Desabilitado</a>
       <a href="#" class="list-group-item">Terceito item - Habilitado</a>
   </div>

Importante : O item esta desabilitado mas ainda é possível clicar no link do item.

BootStrap - List group com itens linkados

Primeiro item Segundo item Terceiro item

Código do controle acima:
     <div style="padding-left:5px" class="container">
      <div class="list-group">
          <a href="#" class="list-group-item list-group-item-action">Primeiro item</a>
          <a href="#" class="list-group-item list-group-item-action">Segundo item</a>
          <a href="#" class="list-group-item list-group-item-action">Terceiro item</a>
      </div>
     </div>

BootStrap - Flush - Removendo bordas

Utilize a class .list-group-flush para remover as bordas e arredondar os vertices:

Primeiro item
Segundo item
Terceito item
Quarto item

Código do controle acima:
   <ul class="list-group list-group-flush">
       <li class="list-group-item">Primeiro item</li>
       <li class="list-group-item">Segundo item</li>
       <li class="list-group-item">Terceito item</li>
       <li class="list-group-item">Quarto item</li>
   </ul>

BootStrap - List group com classes contextuais

Com estas classes podemos exibir um item dentro de um contexto de sucesso, fracasso, informação.

Item com Successo
Item Secundario
Item apenas para Informação
Item Aviso
Item de Alerta de perigo
Item primario
Item escuro
Item claro

Código dos controles acima:
   <ul class="list-group">
       <li class="list-group-item list-group-item-success">Item com Successo</li>
       <li class="list-group-item list-group-item-secondary">Item Secundario</li>
       <li class="list-group-item list-group-item-info">Item apenas para Informação</li>
       <li class="list-group-item list-group-item-warning">Item Aviso</li>
       <li class="list-group-item list-group-item-danger">Item de Alerta de perigo</li>
       <li class="list-group-item list-group-item-primary">Item primario</li>
       <li class="list-group-item list-group-item-dark">Item escuro</li>
       <li class="list-group-item list-group-item-light">Item claro</li>
   </ul>

BootStrap - List group com badges(Crachás)

Combine a classe .badge com a classe utility/helper para adicionar badges dentro de um list group:

Caixa de entrada 12
Propaganda 50
Lixo 99

Código dos controles acima:
   <ul class="list-group">
       <li class="list-group-item d-flex justify-content-between align-items-center">
        Caixa de entrada
        <span class="badge badge-primary badge-pill">12</span>
       </li>
       <li class="list-group-item d-flex justify-content-between align-items-center">
        Propaganda
        <span class="badge badge-primary badge-pill">50</span>
       </li>
       <li class="list-group-item d-flex justify-content-between align-items-center">
        Lixo
        <span class="badge badge-primary badge-pill">99</span>
       </li>
   </ul>